<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.marquee.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.blockUI.js"></script>
	<style>
	
	body{
		font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		text-align:center;
		display: block;
	}
	p, h1, form, button, body{border:0; margin:0; padding:0;}
	.spacer{clear:both; height:1px;}
	
	#userPanel{
		width: 320px;
		padding: 10px;
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
		font-size:12px;
		margin: 50px auto;
	}
	
	#userPanel form p{
		font-size:11px;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#userPanel form label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:100px;
		float:left;
		margin-top: 8px;
	}
	
	#userPanel form input{
		float:left;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:150px;
		margin:2px 0 20px 10px;
	}
	
	#userPanel form input.checkbox {
		margin-top: 10px;
		width: 15px;
	}
	
	#userPanel form button{
		clear:both;
		margin-left:100px;
		width:125px;
		height:31px;
		background:#666666;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
	
	#userPanel {
		font-size: 12px;
	}
	
	#userPanel button#logout {
		float: right;
	}
	
	.username {
		color: blue;
		font-weight: bold;
	}
	
	.error {
		color: red;
		font-weight: bold;
	}
	
	.hide {
		display: none;
	}
	</style>
	<script type="text/javascript">
	var FMP = chrome.extension.getBackgroundPage().FMP;
	</script>
</head>
<body>
	<div id="userPanel">
		<form id="login" name="form" method="post">
		
		<p class="error hide"></p>

		<label for="username">Username</label>
		<input type="text" name="username" id="username" />

		<label for="password">Password</label>
		<input type="password" name="password" id="password" />
		

		<label>Remember me</label>
		<input type="checkbox" name="remember" class="checkbox" />

		<button type="submit">Sign-up</button>
		<div class="spacer"></div>

		</form>
		
		<br style="clear:both;" />
	</div>
	
	<script type="text/javascript">
	var blockData = { 
			message: '<h1>Please wait...</h1>', 
			css: { border: '3px solid #a00', width: '50%', padding: 10 },
			overlayCSS: {cursor: null}
		};
	
	function updateStatus() {
		var lastState = $('#userPanel').data('userID');
		
		var locked = true;
		
		if(FMP.mainStatus.get() && (lastState != FMP.data.userID) ) {
			$('#userPanel').data('userID', FMP.data.userID)
			$('html').unblock();
			locked = false;	
			window.close();
		}
		
		if( $('.blockUI').length > 0 && locked) {
			setTimeout(updateStatus, 100);
			return;
		}
		
		setTimeout(updateStatus, 100);
	}

	$(document).delegate('#login', 'submit', function() {
		$('#login').find('p.error').addClass('hide').html("");
		
		var invalidLogin = function() {
			$('#login').find('p.error').html("Invalid login details.").show('pulsate');
			$('html').unblock();
		};
		
		var obj = $('#login').serializeArray();
		
		if(obj[0].value == '' || obj[1].value == '') {
			invalidLogin();
			return false;
		}
		
		$('html').block(blockData);

		
		$.ajax({
			url: FMP.serverHost+"/login",
			type: 'POST',
			data: $('#login').serialize(),
			dataType: 'json',
			success: function(d) {
				var userID, username, token;
				
				if(d.userID !== false) {
					userID = d.userID;
					username = d.username;
					token = d.token;
					
					if(d.remember) {
						chrome.extension.getBackgroundPage().localStorage.setItem('token', token);
					}
					
					FMP.loadNewUser(userID, username, token);
				} else {
					invalidLogin();
				}
			}, error: function() {
				$('#login').find('p.error').html("Error connecting to the server. Try again...").show('pulsate');
				$('html').unblock();
			}
		});
		
		return false;
	});
	
	updateStatus();
	</script>
</body>
</html>